<template>
  <el-date-picker style="width: 180px;" v-model="modeValue" type="daterange" unlink-panels clearable range-separator="-"
    start-placeholder="开始时间" :disabled-date="disabledDate" format="YY/MM/DD" value-format="YYYY-MM-DD"
    end-placeholder="结束时间" :shortcuts="shortcuts" v-bind="$attrs" @clear="clear" />
</template>
<script setup>
import { dayjs } from 'element-plus';
const value = defineModel();
const shortcuts = [
  // {
  //   text: '全部',
  //   value: () => {
  //     return [null, null]
  //   }
  // },
  {
    text: '今天',
    value: () => {
      const data = dayjs(new Date()).format('YYYY-MM-DD')
      return [data, data];
    }
  },
  {
    text: '昨天',
    value: () => {
      const start = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
      const end = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
      return [start, end];
    }
  },
  {
    text: '过去7天',
    value: () => {
      const start = dayjs(new Date()).subtract(7, 'day').format('YYYY-MM-DD')
      const end = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
      return [start, end];
    }
  },
  {
    text: '过去30天',
    value: () => {
      const start = dayjs(new Date()).subtract(30, 'day').format('YYYY-MM-DD')
      const end = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
      return [start, end];
    }
  },
  {
    text: '本月',
    value: () => {
      const start = dayjs(new Date()).format('YYYY-MM') + '-01'
      const end = dayjs(new Date()).format('YYYY-MM-DD')
      return [start, end];
    }
  },
  {
    text: '上月',
    value: () => {
      const start = dayjs(new Date()).subtract(1, 'month').format('YYYY-MM') + '-01'
      const end = dayjs(new Date()).subtract(1, 'month').format('YYYY-MM-DD')
      return [start, end];
    }
  }
];
const modeValue = ref([]);
const disabledDate = (a) => {
  // 不能选择2024-09-30之前的时间
  return a.getTime() >= new Date('2024-09-30').getTime() ? false : true;
};
watchEffect(() => {
  value.value = modeValue.value;
});

/** 清除时间事件 */
const clear = () => {
  modeValue.value = ['', ''];
  value.value = modeValue.value;
};
</script>
<style lang="scss" scoped></style>
